import { PageContainer } from '@ant-design/pro-layout';
import { Button, Modal } from 'antd';
import { useState } from 'react';
import { history } from 'umi';

window.addEventListener('message', (e) => {
  if (e.data?.type !== 'load') {
    //鼠标事件
    console.log('iframe传递', e.data);
    if (e.data?.type == 'click') {
    }
    return;
  }
  //加载完毕
  console.log('iframe加载完毕');
});

const dpUrl = 'https://charts.thingjs.com/kunpeng/preview/publish/6vEBf2';

const MainContainer = () => {
  const [fullScreen, setFullScreen] = useState(false);

  const goFullScreen = () => {
    history.push('/lywater/screen-full-screen');
  };
  return (
    <PageContainer
      content={
        <div>
          <Button onClick={goFullScreen}>全屏</Button>
          <iframe
            id="iframeDiagram"
            allowFullScreen
            frameBorder="0"
            style={{ width: '100%', height: '87vh' }}
            src={dpUrl}
          />
          <Modal centered width={'100vw'} open={fullScreen} onCancel={() => setFullScreen(false)}>
            <iframe
              id="iframeDiagram"
              allowFullScreen
              frameBorder="0"
              style={{ width: '100%', height: '100%' }}
              src={dpUrl}
            />
          </Modal>
        </div>
      }
    />
  );
};
export default MainContainer;
